<template>
  <div style="height: 100%; width: 100%;">
    <div class="wrap">
      <div class="infoBox">
        <!-- 最左侧状态栏位 -->
        <div v-show="false" style="width:50px;height:100%;background-color: black">
          <img class="head_portrait" :src="headSculpture" alt="">
          <i class="el-icon-chat-dot-round head_portrait" style="font-size:30px;color:white;"></i>
          <i class="el-icon-user head_portrait" style="font-size:30px;color:white;"></i>
        </div>
        <!-- 左边用户列表 -->
        <div v-show="true" class="userList">
          <div class="searchBox">
            <el-input placeholder="请输入内容" v-model="search" class="input-with-select" size="mini" @input="inquire">
              <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick">
              </i>
            </el-input>
          </div>
          <div class="userListBox">
            <div v-for="(item, index) in userListData" :key="index" @click="getAct(item, index)"
              :class="item.userId == act ? 'userFlexAct' : 'userFlex'">
              <div>
                <!-- 有未读消息 -->
                <!-- <el-badge :value="10">
                  <img :src="item.url" alt="头像" class="head_portrait2" style="margin-left: 20px" />
                </el-badge> -->
                <!-- 没有未读消息 -->
                <el-badge :value="99">
                  <img :src="item.url" alt="头像" class="head_portrait2" style="margin-left: 20px" />
                </el-badge>
              </div>
              <div style="margin-right: 30px">
                <el-tooltip :content="item.userName" placement="bottom" effect="light">
                  <div style="color: #565656" class="userName">
                    {{ item.userName }}
                  </div>
                </el-tooltip>
                <div class="userInfo">{{ item.topicId }}</div>
              </div>
              <div style="margin-right: 10px; font-size: 14px; color: #ccc">
                {{ item.timer }}
              </div>
            </div>
          </div>
        </div>
        <!-- 右边输入框和信息展示 -->
        <div class="infoList">
          <!-- 信息 -->
          <div style="width:100%;height:5%;line-height:40px;border-bottom:1px solid #ccc;margin-left:10px;">
            {{ toname }}</div>
          <div class="infoTop" ref="scrollBox" id="box">
            <div :class="item.position == 'left' ? 'chatInfoLeft' : 'chatInfoRight'"
              v-for="(item, index) in userInfoList" :key="index">
              <img :src="item.url" alt="头像" class="head_portrait2" />
              <div :class="item.position == 'left' ? 'chatLeft' : 'chatRight'">
                <div class="text" v-html="item.info"></div>
              </div>
            </div>
          </div>

          <!-- 输入框 -->
          <div class="infoBottom">
            <div class="infoIcon">
              <i @click="extend('0')" class="el-icon-picture-outline-round"></i>
              <i @click="extend('1')" class="el-icon-folder-opened"></i>
            </div>
            <textarea type="textarea" class="infoInput" v-model="textarea"
              @keydown.enter.exact="handlePushKeyword($event)" @keyup.ctrl.enter="lineFeed"
              :disabled='isshow==1?false:true' />
            <div class="fasong" @click="setUp" v-show="isshow==1?true:false">发送</div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog class="dialog-container" title="图片预览" :visible.sync="dialogImgs" width="600" :before-close="closeImg">
      <!-- <el-carousel height="680px" :autoplay="false">
        <el-carousel-item v-for="(item,index) in imgArr" :key="item" style="text-align:center;">
          <h2 style="text-align:center;">{{index+1}}-{{imgArr.length}}</h2>
          <img :src="item" alt="证明图片" style="height:100%;width:100%;" />
        </el-carousel-item>
      </el-carousel> -->
      <img src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="图片预览"
        style="height:100%;width:100%;" />
    </el-dialog>

  </div>
</template>

<script>
import Vue from 'vue';

let socket;

export default {
  data() {
    return {
      // 在线状态
      state: 1,
      //搜索用户
      search: "",
      //左侧状态栏头像
      headSculpture: require("../../img/agreebee.png"),
      //用户列表渲染数据
      userListData: [
        {
          url: '',
          userId: 'yw4257',
          userName: '郜秀文',
          topicId: '2023052304777',
          timer: '',
        },
        {
          url: '',
          userId: '4880',
          userName: '高元坤',
          topicId: '2023052304777',
          timer: '',
        },

      ],
      //用户列表筛选数据
      userListDatas: [],
      //历史信息
      userInfoList: [
        // {
        //   url: '',//头像
        //   fromid: '',//发起人id
        //   fromname: '',//发起人名称
        //   toid: '',//接收人id
        //   toname: '',//接收人名称
        //   info: '',//聊天内容
        //   sendDate: '',//发送日期
        //   topicId: '',//工单号
        //   position: '',//位置
        // }
      ],
      //用户点击选中变色
      act: Number,
      //聊天输入框
      textarea: "",
      //滚动条距离顶部距离
      scrollTop: 0,
      //发送和输入显隐
      isshow: 0,
      //当前登录用户id
      currentId: '',
      //当前登录用户姓名
      currentName: '',
      //当前工单号
      currentTopicId: '',
      //对方id
      toid: '',
      //聊天信息对方名字
      toname: "",
      //消息存储集合
      userInfoMap: '',
      //分页
      currentPage: '1',
      pageSize: '5',
      //图片预览弹窗
      dialogImgs: false,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      ]
    };
  },
  created() {
    const _this = this;
    let arr = [1,2,3];
    Vue.set(arr, 0 , 4)
    console.log("arr", arr);


    // console.log("location>>>", decodeURIComponent(location.href));
    let url = decodeURIComponent(location.href).split('?')[1].split('&');
    // console.log("url>>>", url);
    this.currentId = url[0].split('=')[1]
    this.currentName = url[1].split('=')[1]
    // console.log(this.currentId, this.currentName);

    this.userInfoMap = new Map;

    this.userListData = this.userListData.filter(function (item) {
      return item.userId != _this.currentId
    });
    this.userListData.forEach(item => {
      item.url = this.createImgUrlForName(item.userName)
    });

    console.log(this.userListData);

  },
  mounted() {
    // 将vue实例的方法绑定到window对象中去 
    window.preview = this.preview
    //用户列表筛选数据，用来初始化数据，方便进行筛选
    this.userListDatas = this.userListData;
    this.init()


  },
  methods: {
    closeImg() {
      this.dialogImgs = false;
    },
    /**
     * 根据工单号查询工单详情
     */
    getDetailByTopicId() {

    },
    /**
     * 
     */
    send() {
      if (!this.textarea.trim()) {
        this.$message({ type: 'warning', message: "请输入内容" })
      } else {
        if (typeof (WebSocket) == "undefined") {
          this.$message({ type: 'warning', message: "您的浏览器不支持WebSocket" })
          // console.log("您的浏览器不支持WebSocket");
        } else {
          // console.log("您的浏览器支持WebSocket");
          // 组装待发送的消息 json
          // {"from": "zhang", "to": "admin", "text": "聊天文本"}
          let message = { from: this.currentId, to: this.toid, text: this.textarea }
          socket.send(JSON.stringify(message));  // 将组装好的json发送给服务端，由服务端进行转发
          // 构建消息内容，本人消息
          // this.createContent(null, this.user.username, this.text)
          // this.formatMessage(null, this.currentId, this.textarea)
          // this.textarea = '';
        }
      }
    },

    /**
     * 点击用户
     */
    getAct(val, index) {

      // console.log("val = ", val);
      this.isshow = 1;
      // 点击用户切换数据时先清除监听滚动事件，防止出现没有历史数据的用户，滚动条为0，会触发滚动事件
      this.$refs.scrollBox.removeEventListener("scroll", this.srTop);
      //点击变色
      this.act = val.userId;
      //清空消息数组
      this.userInfoList = [];
      //点击的聊天用户
      this.toname = val.userName;//聊天窗口对方姓名
      this.toid = val.userId;//聊天窗口对方id
      this.currentTopicId = val.topicId;

      if (this.userInfoMap.get("userInfoList" + this.currentTopicId) == undefined) {
        this.userInfoMap.set("userInfoList" + this.currentTopicId, [])
      }
      console.log("userInfoList" + this.currentTopicId, this.userInfoMap.get("userInfoList" + this.currentTopicId));
      this.userInfoList = this.userInfoMap.get("userInfoList" + this.currentTopicId);

      this.getHistoryMsg();

      /* 直接调用不生效：因为你历史数据刚给，渲染的时候盒子高度还没有成型，所以直接调用拿不到，
         用个定时器让他在下一轮循环中调用，盒子就已经生成了
      */
      this.$nextTick(() => { // 一定要用nextTick
        this.setPageScrollTo();
        //页面滚动条距离顶部高度等于这个盒子的高度
        this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
      })

    },

    /**
     * 发送
     */
    setUp() {
      console.log("发送内容:", this.textarea);
      if (!this.textarea.trim()) {
        this.$message({
          message: "发送信息不能为空",
          type: 'info'
        });
        return;
      }
      this.userInfoMap.get("userInfoList" + this.currentTopicId).push({
        url: this.createImgUrlForName(this.currentName),//头像
        fromid: this.currentId,//发起人id
        fromname: this.currentName,//发起人名称
        toid: this.toid,//接收人id
        toname: this.headName,//接收人名称
        info: this.textarea,//聊天内容
        sendDate: this.getDateTime(),//发送日期
        topicId: '',//工单号
        position: 'right',//位置
      })

      this.send();//通过websocket推送到对应的人
      this.saveMessage();
      this.textarea = "";
      // 页面滚动到底部
      this.$nextTick(() => { // 一定要用nextTick
        this.setPageScrollTo();
        //页面滚动条距离顶部高度等于这个盒子的高度
        this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
      })
    },
    // 监听键盘回车阻止换行并发送
    handlePushKeyword(event) {
      console.log(event);
      if (event.keyCode === 13) {
        event.preventDefault(); // 阻止浏览器默认换行操作
        this.setUp(); //发送文本
        return false;
      }
    },
    // 监听按的是ctrl + 回车，就换行
    lineFeed() {
      this.textarea = this.textarea + "\n";
    },
    /**
     * 发送文件或者图片
     */
    extend(val) {
      if (!this.toid) {
        this.$message({
          message: "请选择聊天对象",
          type: 'warning'
        });
        return;
      }
      // alert("你点击了：" + val);
      if (val == '0') {
        this.userInfoMap.get("userInfoList" + this.currentTopicId).push({
          url: this.createImgUrlForName(this.currentName),//头像
          fromid: this.currentId,//发起人id
          fromname: this.currentName,//发起人名称
          toid: this.toid,//接收人id
          toname: this.toname,//接收人名称
          // info: this.textarea,//聊天内容
          // info: `<img src="${this.createImgUrlForName(this.currentName)}" alt="" width="50" height="50" onclick="preview()">`,//发送图片
          info: `<img src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="" width="50" height="50" onclick="preview()">`,//发送图片
          // info: `<el-image style="width: 100px; height: 100px" :src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :preview-src-list="srcList"></el-image>`,//发送图片
          // info: `<a href="excel/短信模板.xlsx">短信模板.xlsx</a>`,//发送文件
          sendDate: this.getDateTime(),//发送日期
          topicId: '',//工单号
          position: 'right',//位置

        })
      } else if (val == '1') {
        this.userInfoMap.get("userInfoList" + this.currentTopicId).push({
          url: this.createImgUrlForName(this.currentName),//头像
          fromid: this.currentId,//发起人id
          fromname: this.currentName,//发起人名称
          toid: this.toid,//接收人id
          toname: this.toname,//接收人名称
          // info: this.textarea,//聊天内容
          // info: `<img src="${this.createImgUrlForName(this.currentName)}" alt="">`,//发送图片
          info: `<a href="excel/短信模板.xlsx">短信模板.xlsx</a>`,//发送文件
          sendDate: this.getDateTime(),//发送日期
          topicId: '',//工单号
          position: 'right',//位置

        })
      }
      this.$nextTick(() => { // 一定要用nextTick
        this.setPageScrollTo();
        //页面滚动条距离顶部高度等于这个盒子的高度
        this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
      })

    },
    /**
     * 查询聊天用户列表
     */
    getUsers() {

    },
    /**
     * 查询聊天接收人信息 
     */
    getUserByTopicId() {

    },
    /**
     * 查询发送历史信息
     */
    getHistoryMsg() {
      const ctx = this;
      let params = {
        request: {
          "queryUserId1": this.currentId,
          "queryUserId2": this.toid,
          "topicId": this.currentTopicId,
        },
        "pgIdx": this.currentPage,
        "pgSize": this.pageSize
      }
      // this.userInfoList = [];
      ctx.$axios.post(`${axios.tpfs}/QueryMessage`, params).then(res => {
        if (res.dealcode == "000000") {
          let msgList = res.flow_list;//聊天信息
          let infoList = [];
          msgList.forEach(item => {
            if (item.fromId == this.currentId) {
              //内容显示在右边
              infoList.push(
                {
                  url: this.createImgUrlForName(item.fromName),//头像
                  fromid: item.fromId,//发起人id
                  fromname: item.fromName,//发起人名称
                  toid: item.toId,//接收人id
                  toname: item.toName,//接收人名称
                  info: item.content,//聊天内容
                  sendDate: item.sendDate,//发送日期
                  topicId: item.topicId,//工单号
                  position: 'right',//位置
                }
              )
            } else {
              //内容显示在左边
              infoList.push(
                {
                  url: this.createImgUrlForName(item.fromName),//头像
                  fromid: item.fromId,//发起人id
                  fromname: item.fromName,//发起人名称
                  toid: item.toId,//接收人id
                  toname: item.toName,//接收人名称
                  info: item.content,//聊天内容
                  sendDate: item.sendDate,//发送日期
                  topicId: item.topicId,//工单号
                  position: 'left',//位置
                }
              )

            }
          })
          // infoList.forEach(item => {
          //   this.userInfoMap.get("userInfoList" + this.currentTopicId).push(item)
          // })
          if (this.currentPage == "1") {
            infoList.forEach(item => {
              this.userInfoMap.get("userInfoList" + this.currentTopicId).push(item)
            })
            this.$nextTick(() => { // 一定要用nextTick
              this.setPageScrollTo();
              //页面滚动条距离顶部高度等于这个盒子的高度
              this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
            })
            // console.log("userInfoList" + this.currentTopicId, this.userInfoMap.get("userInfoList" + this.currentTopicId));

          } else {
            console.log("infolist", infoList.reverse());
            console.log("userInfoList" + this.currentTopicId, this.userInfoMap.get("userInfoList" + this.currentTopicId));
            
            infoList.forEach(item => {
              this.userInfoMap.get("userInfoList" + this.currentTopicId).unshift(item)
            })
          }



        } else {
          ctx.$message({
            type: "error",
            message: res.dealmsg || "查询失败！"
          })
        }


      }).catch(error => {
        ctx.$message({
          type: "error",
          message: "系统异常，查询失败！"
        })
      })
    },
    /**
     * 保存消息到数据库
     */
    saveMessage(isRead, contentType) {
      // 函数内直接用 ctx 代替 this 访问 Vue 页面的数据。
      if (!this.textarea.trim()) {
        return;
      }
      const ctx = this;
      let params = {
        request: {
          "topicId": this.currentTopicId,//工单号
          "fromId": this.currentId,//发起人id
          "fromName": this.currentName,//发起人名称
          "toId": this.toid,//接收人id
          "toName": this.toname,//接收人名称
          "content": this.textarea,//消息内容
          "sendDate": this.getDateTime(),//发送日期
          "groupId": "",//群id
          "isRead": "1",//是否已读，0-是，1-否
          "contentType": "1",//消息类型，1-普通文本，2-文件
          "contentClass": "1",//消息类，1-用户聊天，2群组聊天
          "extend1": "",//扩展字段1
          "extend2": "",//扩展字段2
          "extend3": "",//扩展字段3
        }

      }
      ctx.$axios.post(`${axios.tpfs}/SaveMessage`, params).then(res => {
        // ctx.$message({
        //   type: "success",
        //   message: "保存成功"
        // })
      }).catch(error => {
        // ctx.$message({
        //   type: "error",
        //   message: "系统异常，消息保存失败！"
        // })
      })
    },

    /**
     * 上传文件，上传成功后，保存发送信息为图片或文件的消息
     */
    uploadFile() {

    },
    /**
     * 图片预览
     */
    preview() {
      // alert("图片预览")
      this.dialogImgs = true;
    },
    //滚动条默认滚动到最底部
    setPageScrollTo(s, c) {
      //获取中间内容盒子的可见区域高度
      this.scrollTop = document.querySelector("#box").offsetHeight;
      setTimeout((res) => {
        //加个定时器，防止上面高度没获取到，再获取一遍。
        if (this.scrollTop != this.$refs.scrollBox.offsetHeight) {
          this.scrollTop = document.querySelector("#box").offsetHeight;
        }
      }, 100);
      //scrollTop：滚动条距离顶部的距离。
      //把上面获取到的高度座位距离，把滚动条顶到最底部
      this.$refs.scrollBox.scrollTop = this.scrollTop;
      //判断是否有滚动条,有滚动条就创建一个监听滚动事件，滚动到顶部触发srTop方法
      if (this.$refs.scrollBox.scrollTop > 0) {
        this.$refs.scrollBox.addEventListener("scroll", this.srTop);
      }
    },
    //滚动条到达顶部
    srTop() {
      //判断：当滚动条距离顶部为0时代表滚动到顶部了
      if (this.$refs.scrollBox.scrollTop == 0) {

        console.log("已经到顶部了查询上一页");
        this.currentPage = Number(this.currentPage) + 1 + "";
        console.log(this.currentPage);
        this.getHistoryMsg()
        //逻辑简介：
        //到顶部后请求后端的方法，获取第二页的聊天记录，然后插入到现在的聊天数据前面。
        //如何插入前面：可以先把获取的数据保存在 A 变量内，然后 this.userInfoList=A.concat(this.userInfoList)把数组合并进来就可以了

        //拿聊天记录逻辑:
        //第一次调用一个请求拉历史聊天记录，发请求时参数带上页数 1 传过去，拿到的就是第一页的聊天记录，比如一次拿20条。你显示出来
        //然后向上滚动到顶部时，触发新的请求，在请求中把分页数先 +1 然后再请求，这就拿到了第二页数据，然后通过concat合并数组插入进前面，依次类推，功能完成！
        // alert("已经到顶部了");

      }
    },

    /**
     * 建立socket连接
     */
    init() {
      let _this = this;
      // this.user = { username: this.currentId }
      let username = this.currentId;
      // console.log("current-username", username);
      if (typeof (WebSocket) == "undefined") {
        // console.log("您的浏览器不支持WebSocket");
      } else {
        // console.log("您的浏览器支持WebSocket");
        let socketUrl = "ws://localhost:8066/aweb-api/websocket/" + username;
        if (socket != null) {
          socket.close();
          socket = null;
        }
        // 开启一个websocket服务
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
          // console.log("websocket已打开");
        };
        //  浏览器端收消息，获得从服务端发送过来的文本消息
        socket.onmessage = function (msg) {
          console.log("收到数据>>>>>>" + msg.data)
          // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
          let data = JSON.parse(msg.data)
          if (data.users) {  // 获取在线人员信息
            // 获取当前连接的所有用户信息，并且排除自身，自己不会出现在自己的聊天列表里
            _this.users = data.users.filter(user => user.username !== username)
          } else {
            // 如果服务器端发送过来的 json 数据 不包含 users 这个key，那么发送过来的就是聊天文本 json 数据
            // {"from": "zhang", "text": "hello"}
            console.log(">>>>>>>接收到内容");
            // if (data.from == _this.toid) {
            console.log(">>>>>>>>开始构建消息内容");
            // 构建消息内容，对消息内容就行格式化
            // _this.createContent(data.from, null, data.text)
            _this.formatMessage(data.from, null, data.text);
            // }
          }
        };
        //关闭事件
        socket.onclose = function () {
          console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
      }
    },
    /**
     * 格式化websocket推送的消息
     */
    formatMessage(remoteUser, currentUser, text) {
      const _this = this;
      if (this.userInfoMap.get("userInfoList" + remoteUser) == undefined) {
        this.userInfoMap.set("userInfoList" + remoteUser, [])
      }
      let remoteUserName = "";
      this.userListData.forEach(item => {
        if (item.userId == remoteUser) {
          remoteUserName = item.userName;
        }
      })

      this.userInfoMap.get("userInfoList" + remoteUser).push({
        url: this.createImgUrlForName(remoteUserName),//头像
        fromid: remoteUser,//发起人id
        fromname: remoteUserName,//发起人名称
        toid: this.toid,//接收人id
        toname: this.toname,//接收人名称
        info: text,//聊天内容
        sendDate: this.getDateTime(),//发送日期
        topicId: '001',//工单号
        position: 'left',//位置

      })
      console.log("userInfoList" + this.currentTopicId, this.userInfoMap.get("userInfoList" + this.currentTopicId));
    },
    /**
     * 点击搜索图标触发
     */
    handleIconClick() {
      // console.log("点击了搜索图标");
    },
    // 模糊搜索用户
    inquire() {
      let fuzzy = this.search;
      if (fuzzy) {
        this.userListData = this.userListDatas.filter((item) => {
          return item.userName.includes(fuzzy);
        });
      } else {
        this.userListData = this.userListDatas;
      }
    },
    /**
     * 获取当前时间
     * 格式：yyyy-MM-dd HH:mm:ss
     */
    getDateTime() {
      var date = new Date(),
        Y = date.getFullYear(),
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
        D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(),
        h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
        m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
        s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
    },
    /**
     * 根据名字生成头像
     */
    createImgUrlForName(name = '张三', backgroundColor = "#86E8DD", fontColor = "#000") {
      let canvasEle = document.createElement("canvas");
      let ctx = canvasEle.getContext('2d');
      canvasEle.width = 200;
      canvasEle.height = 200;
      let cWidth = ctx.canvas.width;
      let cHeight = ctx.canvas.height;
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, cWidth, cHeight)
      let fontSize = canvasEle.width * 0.8;
      ctx.font = fontSize + 'px 黑体';
      ctx.fillStyle = fontColor;
      ctx.fillText(name[0], cWidth / 2 - fontSize / 2, cHeight / 2 + fontSize / 3);
      var tempSrc = canvasEle.toDataURL("image/png");
      return tempSrc;
    },



  },
};
</script>

<style scoped>
.wrap {
  height: 100%;
  width: 100%;
  background-color: #f2f2f2;
  margin: auto;
  /* transform: translateY(10%); */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  /* border-radius: 10px; */
}

.infoBottom {
  height: 30%;
  display: flex;
  flex-direction: column;
}
/* 输入框 */
.infoInput {
  height: 58%;
  width: 100%;
  border: none;
  resize: none;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  /* color: #434343; */
}
/* 输入框得到焦点时不显示边框 */
.infoInput:focus {
  outline: none;
}

.fasong {
  height: 30px;
  width: 80px;
  background-color: #e8e8e8;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
  color: #58df4d;
  margin-top: 1%;
  align-self: flex-end;
  margin-right: 20px;
  cursor: pointer;
}
.infoIcon {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
}
.infoIcon i {
  font-size: 24px;
  color: #676767;
  margin-left: 15px;
  cursor: pointer;
}
/* 头像 */
.head_portrait {
  margin: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.head_portrait2 {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

/* 列表和信息 */
.infoBox {
  height: 100%;
  width: 100%;
  display: flex;
}

/* 用户列表大盒子 */
.userList {
  height: 100%;
  width: 20%;
  min-width: 280px;
  border-right: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}
/* 用户列表 */
.userListBox {
  padding: 10px 0;
  flex: 1;
  width: 100%;
  overflow: auto;
}

/* 信息外层盒子 */
.infoList {
  height: 100%;
  width: 80%;
}

/* 信息列表 */
.infoTop {
  height: 65%;
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}

/* 对方发的信息样式 */
.chatInfoLeft {
  min-height: 70px;
  margin-left: 10px;
  margin-top: 20px;
  display: flex;
}
.chatLeft {
  margin-left: 15px;
  flex: 1;
}
.chatLeft .text {
  color: hsl(0, 0%, 26%);
  margin-top: 8px;
  background-color: #e3e3e3;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  max-width: 50%;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  white-space: pre-wrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

/* 自己发的信息样式 */
.chatInfoRight {
  height: 70px;
  margin-left: 10px;
  margin-top: 20px;
  display: flex;
  flex-direction: row-reverse;
}
.chatRight {
  margin-right: 15px;
  flex: 1;
  /* 用align-items把元素靠右对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chatRight .text {
  color: #434343;
  margin-top: 8px;
  background-color: #95ec69;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 4px;
  max-width: 50%;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  white-space: pre-wrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.searchBox {
  padding: 10px 10px;
  border-bottom: 1px solid #ededed;
}
.input-with-select {
  width: 100%;
  margin-right: 2%;
}
/* 点击用户变色 */
.userFlexAct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  background-color: #e8e8e8;
}
/* 用户默认颜色 */
.userFlex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
}
/* 用户名 */
.userName {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 简略信息 */
.userInfo {
  width: 135px;
  font-size: 14px;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #dbd9d9;
  border-radius: 3px;
}
</style>

<style lang="scss">
html,
body,
#app {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
</style>
